<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ page session="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<%--<meta http-equiv="X-UA-Compatible" content="IE=edge">--%>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<%--<link rel="icon" href="../../favicon.ico">--%>
		<title>登录</title>
		<!-- 页面的title图片 -->
		<link rel="icon" sizes="192x192" href="http://47.98.135.44:32768/group1/M00/00/00/rBEAA1rq1ZCAKq3UAABPxkFiVW0127.bmp" type="image/x-ico" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<meta name="description" content="">
		<meta name="author" content="">
		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

		<script>
			$(function() {

				$("#username").blur(function() {
					if($(this).val() == "") {
						$("#span1").html("<font class='error' style='color: red'>用户名不能为空</font>");
					}
				});
				$("#username").click(function() {
					if($(this).val() != null) {
						$(".error").val("");
					}
				});
				$("#password").blur(function() {
					if($(this).val() == "") {
						$("#span2").html("<font class='error' style='color: red'>密码不能为空</font>");
					}
				});
				$("#password").click(function() {
					$(".error").remove();
				});
				$("#loginSubmit").click(function () {
                    $.post("/user/login", $("#loginForm").serialize(),function(data){
                        if (data.status == 200) {
							location.href = "http://localhost:8084";
                        } else {
                            alert("登录失败，原因是：" + data.msg);
                        }
                    });
                });

			});
		</script>
	</head>

	<body>
		<!--http://litta.co/wp-content/uploads/2017/06/homescreen.jpeg-->
		<div class="container-fluid" style="background-image: url(https://vipp.com/sites/default/files/vipp-17-pedal-bin-frontpage.jpg);padding-top: 200px;padding-bottom: 400px;">
			<div class="row col-sm-2 col-md-2  col-lg-2 panel pull-right" style="background-color: white;margin-right: 15%;">
				<h1 style="padding-top: 20px; padding-bottom: 20px;"><font face="symbol"><p class="text-center">账号登录</p></font></h1>
				<form id="loginForm" method="post">
					<div class="form-group col-sm-12 col-md-12  col-lg-12" style="margin-bottom: 30px;">
						<%--<label for="exampleInputEmail1">用户名:</label>--%>
						<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
						<span id="span1"></span>
					</div>
					<div class="form-group col-sm-12 col-md-12  col-lg-12" style="margin-bottom: 30px;">
						<%--<label for="exampleInputPassword1">密	码:</label>--%>
						<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
						<span id="span2"></span>
					</div>
					<div class="col-sm-12 col-md-12  col-lg-12">
						<button type="reset" class="btn btn-warning col-sm-6 col-md-6  col-lg-6">重置</button>
						<button type="button" id = "loginSubmit" class="btn btn-success col-sm-6 col-md-6  col-lg-6">登录</button>
					</div>
					<div class="col-sm-12 col-md-12  col-lg-12">
						<hr />
						<p class="text-center">你还没有账号？<a href="/page/register">立即注册</a></p>
					</div>
				</form>
			</div>
		</div>
	</body>

</html>